<!-- 样本管理页面 -->
<template>
    <div class="routings">
      <div class="tab-container">
        <div>
          <!-- 标签页选项卡 $event事件对象-->
        <div class="tab" @click="openTab($event, 'tab1')">自建样本</div>
        <div class="tab" @click="openTab($event, 'tab2')">预置样本</div>
        <div class="tab" @click="openTab($event, 'tab3')">公开样本</div>
        </div>
        
        <!-- 上面的主容器 -->
        <div class="research">
          <!-- 左侧容器 -->
          <div class="researchss">
            <el-row>
            <el-col :span="8">
              <el-form-item label="样本集名称">
                <el-input v-model="nameInput" placeholder="请输入">
                  <template #append>
                    <el-button>
                      <el-icon><Search /></el-icon>
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签数量">
                <el-input v-model="numberInput1" placeholder="请输入">
                  <template #append>
                    <el-button>
                      <el-icon><Search /></el-icon>
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <el-date-picker
                  type="date"
                  v-model="time"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择采集日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
            <el-col :span="8">
              <el-form-item label="样本集类型">
                <el-select v-model="value" placeholder="请选择" clearable>
                  <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="样本数量">
                <el-input v-model="numberInput2" placeholder="请输入">
                  <template #append>
                    <el-button>
                      <el-icon><Search /></el-icon>
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <div class="demos">
              <!-- 占位用 -->
            </div>
            
          </el-row>


          </div>
          
           <!-- 把按钮包起来做布局用 -->
        <div class="but">
          <!-- 如果是第一个页面就显示按钮 -->
        <button class="buts" v-if="currentTab === 'tab1'">新建样本集</button>
        </div>
           
        </div>
        
       
        

        <!-- 标签页内容 -->
        <div id="tab1" class="tab-content" style="display: block;">
          <div class="content">
            <div class="empty">
              <img src="https://g.alicdn.com/aie/portal/1.4.3/console-main/images/ac58d642b879ec86872b.svg">
              <span class="texts">暂无数据</span>
            </div>
          </div>

          


        </div>
        <div id="tab2" class="tab-content">
          <div class="buttom">
            <!-- 表格宽度 -->
            <el-table :data="tableData" stripe  style="width: 100%" >

              <el-table-column label="样本名称">
      <!-- 插槽插入图片 -->
        <template v-slot="crazy">
            <div style="display: flex; align-items: center;">
            <img src="/src/images/tw6.png" alt="图片" style="width: 40px; height: 40px; margin-right: 5px;" />
                {{ crazy.row.name }}
            </div>
        </template>
    </el-table-column>
                
                <el-table-column prop="version" label="样本类型" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="labelCount" label="标签数量" />
                <el-table-column prop="type" label="样本尺寸" />
                <el-table-column prop="condition" label="样本数量" />
                
                <el-table-column label="操作">
      <template v-slot="scope">
      <span class="operate" @click="gocheck(scope.row)">查看</span> | 
      <span class="operate" @click="goToDates(scope.row)">详情</span>
  </template>
</el-table-column>

            </el-table>
        </div>
        </div>
        <div id="tab3" class="tab-content">
          <div class="buttom">
              <!-- 表格宽度 -->
            <el-table :data="tableData" stripe style="width: 100%">
             <el-table-column label="样本名称">

      <!-- 插槽插入图片 -->
        <template v-slot="crazy">
            <div style="display: flex; align-items: center;">
         <img src="/src/images/tw7.png" alt="图片" style="width: 40px; height: 40px; margin-right: 5px;" />
                {{ crazy.row.name }}
            </div>
        </template>

    </el-table-column>
    <el-table-column prop="version" label="样本类型" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column prop="labelCount" label="标签数量" />
    <el-table-column prop="type" label="样本尺寸" />
    <el-table-column prop="condition" label="样本数量" />
    <el-table-column label="操作">
      <template v-slot="scope">
        <!-- 调用跳转的方法，跳转路由 -->
      <span class="operate" @click="gocheck(scope.row)">查看</span> | 
      <span class="operate" @click="goToDates(scope.row)">详情</span>
  </template>
</el-table-column>
</el-table>

        </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
    /* 三个输入框的动态响应数据 */
  const nameInput = ref('');
  const numberInput1 = ref('');
  const numberInput2 = ref('');

  const time = ref('');
  const value = ref('');
  const currentTab = ref('tab1'); // 默认选中第一个标签页
  
  const option = [
    { value: "0", label: "目标检测" },
    { value: "1", label: "地物识别" },
    { value: "2", label: "通用变化检测" },
    { value: "3", label: "实例分割" },
    { value: "4", label: "地物分类" },
    { value: "5", label: "多分类变化检测" }
  ];
  //打开标签的函数
  function openTab(event: { currentTarget: { classList: { add: (arg0: string) => void; }; }; }, tabName: string) {
   // 更新当前选中的标签页
    currentTab.value = tabName; 
      //读取tab-content分页内容
    const tabContent = document.getElementsByClassName("tab-content");
    for (let i = 0; i < tabContent.length; i++) {
      //若我们本身比typescript更清楚该元素属于的类型可以用as断定他，但是由于本身就默认为HTMLELement所以没有必要
      (tabContent[i] as HTMLElement).style.display = "none";
    }
    //读职标签页
    const tabs = document.getElementsByClassName("tab");
    for (let i = 0; i < tabs.length; i++) {
      //移除active属性,使其没选中的时候使暗着的
      tabs[i].classList.remove("active");
    }
    //选择标签页使其展示
    document.getElementById(tabName).style.display = "block";
    
    //标签选中时亮着
    event.currentTarget.classList.add("active");
  }

 
    
  

    const tableData =[
        {
            name: "多分类变化检测数据集",
            version: "多分类变化检测",
            createTime: "2022-08-02 20:00:22",
            labelCount: "66",
            type: "1024*1024",
            condition: "2000",
            
        },
        {
          name: "建筑变化检测数据集",
            version: "多分类变化检测",
            createTime: "2022-03-29 17:28:43",
            labelCount: "3",
            type: "1024*1024",
            condition: "909",
            
        },
        {
          name: "通用变化检测数据集",
            version: "通用变化检测",
            createTime: "2022-03-29 20:14:34",
            labelCount: "1",
            type: "1024*1024",
            condition: "2000",
            
        },
        {
          name: "地物分类数据集",
            version: "地物分类",
            createTime: "2022-03-28 19:36:03",
            labelCount: "11",
            type: "1024*1024",
            condition: "1000",
           
        },
         {
          name: "建筑物提取数据集",
            version: "地物识别",
            createTime: "2022-03-25 14:55:31",
            labelCount: "1",
            type: "1024*1024",
            condition: "998",
            
        },
    ]
    

  
  // 页面加载后默认选中第一个标签
  onMounted(() => {
    const firstTab = document.getElementsByClassName('tab')[0];
    firstTab.classList.add('active');
    document.getElementById('tab1').style.display = 'block';
  });

//查看和详情的跳转方法
  function gocheck(row: { id: any; }) {
    /* 查看 跳转的路由。暂时关闭 */
  /* const viewPath = `/${row.id}`;
  window.location.href = viewPath; */
}

function goToDates(row: { id: any; }) {
  /* 详情 跳转的路由 ，暂时关闭*/
  /* const detailsPath = `/${row.id}`;
  window.location.href = detailsPath; */
}

  </script>
  
  <style lang="scss" scoped>
 
  
  /* 导航栏容器 */
  .routings {
    width: 95%;
    height: 95%;
    /* border: 1px solid rgb(70, 211, 95); */
    margin: 15px;
  }
  
  /* 设置标签页外层容器样式 */
  .tab-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }



  
  /* 设置标签页选项卡的样式 */
  .tab {
    float: left;
    padding: 8px 16px;
    background-color: #17181a;
    color: #bababb;
    cursor: pointer;
  }
  
  /* 设置选中的标签页样式 */
  .active {
    color: #4584ff;
    
  }
  
  /* 设置标签页内容的样式 */
  .tab-content {
    width: 100%;
    display: none;
    color: #bababb;
  }
  
  
  
  /* 搜索框容器 */
  .research {
    display: flex;
    width: 100%;
    height: 15vh;
   
    margin-top: 60px;
  }
  /* 左侧的容器 */
  .researchss{
    flex: 4;
    
  }
  
  /* 占位用 */
  .demos {
    width: 25vw;
    height: 5vh;
  }
  
  
  /* 按钮容器的样式 */
  .but{
    
    flex: 3;
  }
  
  /* 页面1的按钮样式 */
  .buts {
    width: 11vw;
    height: 4.8vh;
    background-color: #4584ff;
    border-radius: 2px; /* 倒角 */
    color: #d4deef;
    border: none; /* 去除按钮的边框线 */
    transition: background-color 0.3s; /* 添加过渡效果,0.3秒内变色完毕 */
    /* 位置 */
    margin-left:55vh ;
   
}



.buts:hover {
    background-color: #2b4882; /* 鼠标悬停时变灰一些 */
}

  
.empty {
    position: absolute; 
    //margin-top: 20vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;  
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .texts {
    color: rgb(100,101,104);
    text-align : center
  }
  

  // 输入框
 ::v-deep .el-input__wrapper{
    background-color: rgb(12,14,18);
    box-shadow:   0 0 0 1px  rgb(47,50,56);
}
//搜索按钮
::v-deep .el-input-group__append{
    background-color: rgb(12,14,18 );
    box-shadow:   0 0 0 1px  rgb(47,50,56);
}
//选择框
::v-deep .el-select__wrapper{
    background-color: rgb(12,14,18);
    box-shadow:   0 0 0 1px  rgb(47,50,56);
}

.buttom{
  width: 100%;
    display: flex;
    justify-content: center;
    
}
.el-table {
    color: rgb(196,199,202);
    --el-table-border-color: transparent;   
    --el-table-header-bg-color:  rgb(35,37,41);
    --el-table-row-hover-bg-color: rgba(47,50,56);
}

// striped先开启斑马纹属性，这里是修改斑马纹颜色 
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
	background: rgb(35,37,41);
}
// 非斑马纹颜色 
::v-deep .el-table tr {
	background: rgb(23,24,25);
}
//悬停
.operate {
  /* 查看和详情的文字颜色 */
  color: #babbba;
  /* 鼠标移过来变成一只手 */
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #4584ff; // 鼠标移过去悬停时的颜色
  }
}


  </style>
  